<template>
    <div>
        <Filter :list="sortList"></Filter>
        <!-- 排序 -->
        <div class="order">
            <div class="item" @click="changeIsStyle(1)" :class="{ active: isStyle == 1 }">综合排序</div>
            <div class="item" @click="changeIsStyle(2)" :class="{ active: isStyle == 2 }">销量</div>
            <div class="item" @click="changeIsStyle(3)" :class="{ active: isStyle == 3 }">评价</div>
            <div class="item" @click="changeIsStyle(4)" :class="{ active: isStyle == 4 }">浏览量</div>
            <div class="item" @click="changeIsStyle(5)" :class="{ active: isStyle == 5 }">价格</div>
            <div class="item" @click="changeIsStyle(6)" :class="{ active: isStyle == 6 }">发布时间</div>
        </div>
        <VideoList :list="videoList!"></VideoList>
    </div>
</template>

<script setup lang="ts">
import Filter from "../Filter/index.vue";
import VideoList from "../videoList/index.vue";
import { onMounted, ref } from "vue";
import vipApi from "@/api/course";
import { ElMessage } from "element-plus";
const isStyle = ref<any>(1);
const changeIsStyle = async (index: any) => {
    isStyle.value = index;

    if (index == 1) {
        VideoListitem();
    }
    if (index == 2) {
        let result = await vipApi.Video();
        videoList.value = result;
    }
    if (index == 3) {
        vipSalesList();
    }
    if (index == 4) {
        ViewList();
    }
    if (index == 5) {
        priceHighList();
    }
    if (index == 6) {
        addTimeList();
    }
};
//sort列表的数据
const sortList = ref<any>(1);
const getSortList = async () => {
    try {
        let result = await vipApi.reqSortList();
        sortList.value = result;
    } catch (error) {
        ElMessage.error("sort列表的数据");
        return Promise.reject(error);
    }
};
// 综合排序
const videoList = ref<any>();
const VideoListitem = async () => {
    try {
        let result = await vipApi.videoList();
        videoList.value = result;
    } catch (error) {
        console.log("综合排序");
    }
};
// 视频评价

const VideoAppraiseList = async () => {
    try {
        let result = await vipApi.VideoAppraiseList();
        videoList.value = result;
    } catch (error) {
        console.log("视频评价");
    }
};
// 销量视频数据

const vipSalesList = async () => {
    try {
        let result = await vipApi.vipSales();
        videoList.value = result;
    } catch (error) {
        console.log("销量视频数据");
    }
};

// 浏览量视频数据

const ViewList = async () => {
    try {
        let result = await vipApi.postViewList();
        videoList.value = result;
    } catch (error) {
        console.log("浏览量视频数据");
    }
};
// 价格由高到低

const priceHighList = async () => {
    try {
        let result = await vipApi.priceHighList();
        videoList.value = result;
    } catch (error) {
        console.log("价格由高到低");
    }
};
// 发布时间

const addTimeList = async () => {
    try {
        let result = await vipApi.addTimeList();
        videoList.value = result;
    } catch (error) {
        console.log("发布时间");
    }
};
//获取数据
onMounted(() => {
    getSortList();
    VideoListitem();
    VideoAppraiseList();
    vipSalesList();
    priceHighList();
    addTimeList();
    ViewList();
});
</script>

<style scoped lang="less">
.order {
    width: 1200px;
    height: 70px;
    background-color: #ffffff;
    margin: 25px auto;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 5px;
    .item {
        display: inline-block;
        font-size: 14px;
        color: #7d8090;
        cursor: pointer;
    }
    :not(:first-child) {
        margin-left: 50px;
    }
    .active {
        color: #f93684;
    }
}
</style>
